define(["jquery","bbcare", "as/app/mabc/search.ui",],function($,$bb,$ui){
	var chart = {}	;
	chart.init =  function(data){
		var $chart = $('<div class="report" style="width:calc(48px * '+data.x.values.length+' + 11rem)"></div>');
		var $xAxis = $('<div class="bb-xAxis"></div>');
  		var $yAxis = $('<div class="bb-yAxis"></div>');
  		var $label = $('<div class="bb-report-label"></div>');
  		var $xAxisName = $('<div class="bb-bar-x-name">'+data.x.title+'</div>');
  		var $yAxisName = $('<div class="bb-bar-y-name">'+data.y.title+'</div>');
  		var $labes = $('<div class="bb-labels"></div>');
  		$label.append($xAxisName,$yAxisName,$labes);
  		$.each(data.labels,function(a,b){
  			var $labesName = $('<div class="labels-name"><span class="labels-bc" style="border: 7px solid '+b.color+';background:'+b.color+'"></span><span style="color:'+b.color+'">'+b.name+'</span></div>');
  			$labes.append($labesName);
  		})
  		var max = Math.floor((data.y.max*1)/5);
  		$yAxis.append('<div class="bb-y-item" style="height: calc(100% / '+(max+1)+');"><span>'+(max+1)*5+'</span></div>');
  		for(i = max;i >= 0;i--){
  			var $yItem = $('<div class="bb-y-item" style="height: calc(100% / '+(max+1)+');"><span>'+(i*5)+'</span></div>');
  			$yAxis.append($yItem)
  		}
  		$yAxis.append('<font class="fa fa-angle-up" ></font>')
  		$.each(data.x.values,function(a,b){
  			var $xItem = $('<div class="bb-x-item" style="width:41.9px"></div>');
  			var $xItemName = $('<div class="bb-x-name" style="color:rgb(90,90,90)">'+data.x.names[a]+'</div>');
  			var $xItemBc = $('<div class="bb-x-bc" style="width:0; background-color:'+b.color+'; border: 1px solid '+b.color+';border-left-width: 42px; height: calc(100%* '+b.score+'/'+(max+1)*5+');"></div>');
  			var $xItemVal = $('<div class="bb-x-val">'+(b.score?b.score:"0")+'</div>');
  			var $xItemValName = $('<div class="bb-x-val-name" style="color:'+b.color+'">'+b.name+'</div>');
  			$xItem.append($xItemName,$xItemBc.append($xItemVal,$xItemValName));
  			$xAxis.append($xItem);
  		})
  		$xAxis.append($('<div class="bb-y-item">&nbsp;</div>'));
  		$xAxis.append('<font class="fa fa-angle-right" ></font>')
		$("#"+data.id).append($chart.append($label,$xAxis,$yAxis));
	}
	return chart;
})
